评论详情：快捷菜单+右侧关联主题
概述
本节完成评论详情页面右侧信息区域的设计与实现，包含评论用户信息展示和关联主题列表。使用 Flex 布局配合 Icon 图标，构建风格一致的评论信息面板。
右侧信息区域结构
区域划分
┌──────────────────────────┐
│ CommentsInfo │
│ ┌──────────────────────┐ │
│ │ 评论用户信息 │ │
│ │ - 头像 + 昵称 │ │
│ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ 相关主题 │ │
│ │ ┌────────────────┐ │ │
│ │ │ 主题1 回复数 │ │ │
│ │ ├────────────────┤ │ │
│ │ │ 主题2 回复数 │ │ │
│ │ ├────────────────┤ │ │
│ │ │ 主题3 回复数 │ │ │
│ │ └────────────────┘ │ │
│ └──────────────────────┘ │
└──────────────────────────┘
text
关联主题列表实现
数据定义
const items = [
{ title: '相关主题一', message: 12 },
{ title: '相关主题二', message: 8 },
{ title: '相关主题三', message: 5 },
]
typescript
模板结构
<template>
<!-- 相关主题标题 -->
<div class="mb-2">
<span class="title-left-marker">相关主题</span>
</div>
<!-- 主题列表 -->
<ul>
<li
v-for="(item, index) in items"
:key="index"
class="flex justify-between text-sm py-1"
>
<div class="flex items-center gap-1">
<i class="i-carbon-chat text-xs" />
<span>{{ item.title }}</span>
</div>
<span class="text-gray-400">{{ item.message }}</span>
</li>
</ul>
</template>
vue
样式设计要点
| 属性 | 用途 | Tailwind 类名 |
|---|---|---|
| Flex 布局 | 标题与回复数水平排列 | flex justify-between |
| 字号控制 | 列表项使用小号字体 | text-sm |
| 图标大小 | 与文字对齐的小图标 | text-xs |
| 间距控制 | 列表项垂直间距 | py-1 |
| 外边距 | 与左侧评论区的距离 | ml-4 / pl-4 |
Icon 风格一致性
确保右侧区域使用的所有图标风格统一：
- 使用同一图标库（如
i-carbon-*或i-iconify-*） - 图标尺寸保持一致，避免某个图标过大
- 颜色与整体暗黑/明亮主题协调
布局调优
右侧信息区域需与中间评论内容保持适当间距：
<!-- 使用 padding 或 margin 分隔左右区域 -->
<div class="comments-info ml-4 pl-4 border-l border-gray-200 dark:border-gray-700">
<!-- 用户信息 -->
<!-- 关联主题 -->
</div>
vue
关键要点
- 关联主题列表使用
v-for循环渲染，:key绑定index - Flex 布局 (
justify-between) 实现标题和回复数的两端对齐 - 图标大小统一控制，保持视觉一致性
- 通过
margin或padding控制与左侧评论区的间距 - 后续可扩展为主题点击跳转、回复数实时更新等交互
↑